<template>
	<view>
		<!-- 支付方式start -->
		<view class="kingon-title kingon-margin-top" v-show="BooL"><text>选择支付方式：</text></view>
		<radio-group @change="radioChange" v-show="BooL">
			<label v-for="item in datalist" :key="item.name" v-if="item.bool">
				<view class="king-payment kingon-space-between kingon-flex-vcenter kingon-border-radius-small">
					<view class="kingon-space-between kingon-flex-vcenter">
						<view class="king-img">
							<image :src="TooL.Core.SetImgLink(item.images)"></image>
						</view>
						<view>
							<view>
								<text>{{ item.name }}</text>
							</view>
							<view class="kingon-gray">
								<text>{{ item.text }}</text>
							</view>
						</view>
					</view>
					<radio :value="item.name" color="#0286ff"></radio>
				</view>
			</label>
		</radio-group>
		<jpPwd ref="jpPwds" @completed="completed" @forget="forget"></jpPwd>
		<!-- 支付方式end -->
	</view>
</template>

<script>
import jpPwd from '@/king-components/component/jp-pwd/jp-pwd.vue';
var _self;
export default {
	components: {
		jpPwd
	},
	props: {
		formdata: {
			type: Array,
			default: function () {
				return [true, true, true, true, true];
			}
		}
	},
	data() {
		return {
			datalist: [{
				name: '余额支付',
				text: '使用灵活，随时消费转让！',
				images: '/static/images/public/yuer.png',
				value: 1,
				bool: true
			},
			{
				name: '货到付款',
				text: '可以先看货，再付款！',
				images: '/static/images/public/xainxia.png',
				value: 7,
				bool: true
			},
			{
				name: '支付宝',
				text: '支付宝，知托付！',
				images: '/static/images/public/serzfb.png',
				value: 3,
				bool: true,
				//#ifdef MP-WEIXIN
				bool: false
				//#endif
			},
			{
				name: '微信',
				text: '安全可靠，后顾无忧！',
				images: '/static/images/public/serwx.png',
				value: 2,
				bool: true
			},
			{
				name: this.KingonUI.Core.getTenantFunction('integralName'),
				text: '会员' + this.KingonUI.Core.getTenantFunction('integralName'),
				images: '/static/images/public/yuer.png',
				value: 8,
				bool: true
			}
			],
			BooL: true
		};
	},
	created() {
		_self = this;
		// console.log("formdata - ", _self.formdata);
		_self.datalist.forEach((v, index) => {
			v.bool = _self.formdata[index];
		});
		// #ifdef MP-WEIXIN
		_self.datalist[2].bool = false;
		// #endif
	},
	watch: {
		formdata: function (newVal) {
			_self.datalist.forEach((v, index) => {
				// console.log("watch - formdata;", v, index, _self.formdata, newVal);
				v.bool = _self.formdata[index];
			});
		}
	},
	methods: {
		Open: function () {
			_self.BooL = true;
		},
		Close: function () {
			_self.BooL = false;
		},
		radioChange: function (e) {
			var list = _self.datalist.find(item => item.name == e.detail.value);
			//1余额2微信3支付宝4现金5套餐6刷卡
			_self.$emit('radioChange', list.value);
		},
		toOpen: function () {
			_self.$nextTick(() => {
				_self.$refs.jpPwds.toOpen();
			});
		},
		toClose: function () {
			_self.$nextTick(() => {
				_self.$refs.jpPwds.toCancel();
			});
		},
		completed: function (e) {
			_self.$emit('completed', e);
		},
		// 忘记密码 余额支付
		forget: function () {
			_self.toClose();
			_self.KingonUI.Core.openNavigateTo('/subHome/public/ForGetPassword/ForGetPayPassword');
		}
	}
};
</script>

<style>
/* 支付方式 */
.king-payment {
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	border: 1rpx solid #dfdfdf;
	/* 小程序不加宽度不撑满 */
	width: 630rpx;
}

.king-img {
	width: 80rpx;
	height: 80rpx;
	padding-right: 20rpx;
}

.king-img image {
	width: 100%;
	height: 100%;

}
</style>